<template>
  <div class="my-images">
    <!-- 图片按钮 -->
    <div class="img_btn" @click="openDialog()">
      <img :src="value || defaultImage" alt />
    </div>
    <!--  对话框 -->
    <!-- "dialogVisible  对话框开关 -->
    <el-dialog :visible.sync="dialogVisible" width="720px">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="素材库" name="list">
          <!-- 切换按钮  -->
          <!-- filterParams.collect   控制开关赋值 -->
          <!-- @change="changeCollect()"  切换全部 收藏 -->
          <el-radio-group
            @change="changeCollect()"
            v-model="filterParams.collect"
            size="medium"
          >
            <el-radio-button :label="false">全部</el-radio-button>
            <el-radio-button :label="true">收藏</el-radio-button>
          </el-radio-group>
          <!-- 列表   -->
          <div class="imglist">
            <!--注册点击事件获取唯一标识 @click="selectedImage(item.url)" -->
            <div
              @click="selectedImage(item.url)"
              :class="{ selected: selectedurl === item.url }"
              v-for="item in image"
              :key="item.id"
              class="image_item"
            >
              <img :src="item.url" alt="" />
            </div>
          </div>
          <!-- 分页 -->
          <el-pagination
            @current-change="currentchange"
            :current-page="filterParams.page"
            :page-size="filterParams.per_page"
            background
            layout="prev, pager, next"
            :total="total"
          >
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="上传图片" name="upload">
          <!-- 上传图片 -->
          <el-upload
            class="avatar-uploader"
            action="http://ttapi.research.itcast.cn/mp/v1_0/user/images"
            :show-file-list="false"
            name="image"
            :headers="headers"
            :on-success="handleAvatarSuccess"
          >
            <!-- imageUrl 接收图片参数 默认值为null  -->
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <!-- @click="uploadConfirm" // 确认上传封面图片  -->
        <el-button type="primary" @click="uploadConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 导入token
import auth from "@/utils/auth";
// 导入默认动态图片
import defaultImage from "@/assets/default.png";
export default {
  name: "my-image",
  // 父传子
  props: ["value"],
  data() {
    return {
      // 当前激活的选项卡name的值
      activeName: "list",
      // 查询素材列表
      filterParams: {
        // 全部 收藏按钮初始值
        collect: false,
        page: 1,
        per_page: 10
      },
      // 获取图片
      image: [],
      //控制对话框开关
      dialogVisible: false,
      // 分页总页数
      total: 0,
      // 存储图片路径唯一标识
      selectedurl: null,
      // 上传图片配置请求头 token
      headers: {
        Authorization: `Bearer ${auth.getUser().token}`
      },
      // 接收成功地址
      imageUrl: null,
      // 预览 按钮图片默认为空  接收选择上传图片
      // uploadImag: defaultImage
      // 默认图片
      defaultImage
    };
  },
  methods: {
    // 确认上传封面图片
    // uploadConfirm: {},
    uploadConfirm() {
      // 当前激活的选项卡name的值activeName
      if (this.activeName === "list") {
        // 判断是否选择则图片 未选择  弹出提示
        if (!this.selectedurl) return this.$message.warning("请选择上传的图片");
        // 赋值图片地址 预览
        // this.uploadImag = this.selectedurl;
        // 子传父
        this.$emit("input", this.selectedurl);
        // 赋值成功关闭对话框
        this.dialogVisible = false;
      }
      //  上传图片 选择
      if (this.activeName === "upload") {
        // 判断上传图片路径是否为空 ，为空则弹出提示
        if (!this.imageUrl) return this.$message.warning("请选择上传的图片");
        // 赋值图片地址 预览
        // this.uploadImag = this.imageUrl;
        // 子传父
        this.$emit("input", this.imageUrl);
        // 赋值成功关闭对话框
        this.dialogVisible = false;
      }
    },
    //  素材上传成功后执行
    handleAvatarSuccess(res) {
      console.log(res);
      //  成功提示
      this.$message.success("上传成功");
      // 赋值图片路径
      this.imageUrl = res.data.url;
    },
    //  获取图片唯一标识  进行赋值
    selectedImage(url) {
      console.log(url);
      // 标识赋值
      this.selectedurl = url;
    },
    // 全部收藏切换
    changeCollect() {
      // 切换回到第一页
      this.filterParams.page = 1;
      // 获取图片
      this.getimage();
    },
    //  获取当前页数
    currentchange(numer) {
      console.log(numer);
      // 赋值当前页码
      this.filterParams.page = numer;
      // 刷新页面
      this.getimage();
    },
    //  对话框开关
    openDialog() {
      this.dialogVisible = true;
      this.getimage();
      // 打开内容为空
      this.imageUrl = null;
      this.selectedurl = null;
    },
    // 获取图片
    async getimage() {
      const {
        data: { data }
      } = await this.$http.get("/user/images", { params: this.filterParams });
      console.log(data);
      this.image = data.results;
      //  获取总页数
      this.total = data.total_count;
    }
  }
};
</script>

<style lang="less" scope>
.my-images {
  display: inline-block;
  margin-top: 10px;
  margin-right: 20px;
  //  图片按钮
  .img_btn {
    width: 180px;
    height: 180px;
    border: 1px dashed #cccccc;

    img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
}
// 列表图片样式
.imglist {
  .image_item {
    width: 150px;
    height: 150px;
    display: inline-block;
    border: 1px dashed #dddd;
    margin-top: 15px;
    margin-right: 15px;
    position: relative;
    // 设置选中伪元素
    &.selected {
      &::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4) url(../assets/selected.png) no-repeat
          center / 50px 50px;
      }
    }
    img {
      width: 100%;
      height: 100%;
      display: inline-block;
    }
  }
}
/deep/.el-dialog__body {
  padding-bottom: 0;
}
</style>
